<template>
    <div class="page flex unified-flex-align unified-flex-center">


        <div class="search flex ">
            <!-- 操作栏 -->
            <div class="option flex">

                <div class="option-input">
                    <el-input v-model="search_value" placeholder="请输入快递订单号"></el-input>
                </div>

                <el-button @click="search">查询物流</el-button>
            </div>
            <!-- 物流信息栏 -->
            <div class="data flex">

                <div class="platform flex unified-flex-align">


                    <div class="company">
                        物流公司：<span class="company-text">菜鸟快递</span>
                    </div>
                    <div class="status">
                        物流状态：<span class="status-text">运输中</span>
                    </div>
                    <div class="setout">
                        始发地：<span class="setout-text">广东省 惠州市</span>
                    </div>
                    <div class="purpose">
                        目的地：<span class="purpose-text">广东省 惠州市</span>s
                    </div>
                    <div class="place">
                        当前所在地：<span class="place-text">广东省 惠州市</span>
                    </div>
                    <div class="estimate">
                        预计到达：<span class="estimate-text">2天</span>
                    </div>


                </div>

                <div class="list">

                    <el-timeline>
                        <el-timeline-item timestamp="2018/4/12" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/12 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/3" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/3 20:46</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item timestamp="2018/4/2" placement="top">
                            <el-card>
                                <h4>更新 Github 模板</h4>
                                <p>王小虎 提交于 2018/4/2 20:46</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>

                </div>

            </div>


        </div>


    </div>
</template>

<script>
    export default {


        data() {
            return {
                search_value: ""
            }
        },
        methods: {

            search() {

                let value = this.search_value

                if (!value) {

                    this.$message.error("请输入快递订单号")
                } else {

                    this.$message.error("执行搜索")

                }




            }

        }


    }
</script>

<style scoped="scoped">
    

    .search {
        width: 90%;
        height: 90%;
        flex-direction: column;

    }

    .option {}

    .option-input {
        flex: 1;
        margin-right: 15px;
    }

    .data {
        flex: 1;
        background-color: #fff;
        margin-top: 15px;
        border-radius: 6px;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 15px;
    }

    .platform {
        height: 60px;
        min-height: 60px;
        border-bottom: 1px solid #c3c3c344;
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        padding: 0px 15px;
    }

    .list {

        flex: 1;
        background-color: #fff;
        padding: 20px 10px;
        /* overflow-y: auto; */
    }

    .company-text {
        /*  物流公司 */
        color: #0E60F7;
    }

    .status-text {
        /*  物流状态 */
        color: #0E60F7;
    }

    .setout-text {
        /*  事发地 */
        color: #0E60F7;
        text-decoration: underline;
    }

    .purpose-text {
        /*  事发地 */
        color: #0E60F7;
        text-decoration: underline;
    }

    .place-text {
        color: #0E60F7;
        text-decoration: underline;
    }

    .estimate-text {
        color: #0E60F7;
    }
</style>
